<template>
  <h2>a={{ a }}<button @click="a++">a++</button></h2>
  <h2>b={{ b }}<button @click="b++">b++</button></h2>
  <h2>c.x={{ c.x }}<button @click="c.x++">c.x++</button></h2>
</template>

<script lang="ts">
import { ref, reactive, watchEffect } from "vue";

export default {
  setup() {
    let a = ref(100),
      b = ref(200);

    let c = reactive({ x: 300 });
    watchEffect(() => {
      console.log(c.x);
      console.log("c.x发生了变化");
    });
    return { a, b, c };
  },
};
</script>
<style></style>
